<template>
  <div class="search">
    <div class="box">
      <el-card class="box-card">
        <!-- 
          border 表格
          default-sort 排序
          stripe 隔行斑马线
         -->
        <el-table :data="tableData" border style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
          stripe>
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="date" label="日期" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <!-- 
          sortable 需要排序的添加字段
         -->
          <el-table-column prop="age" label="年龄（排序）" align="center" sortable>
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center">
          </el-table-column>
          <el-table-column prop="addressLong" label="地址(超出隐藏)" align="center">
            <template slot-scope="scope">
              <el-tooltip popper-class="tps" :content="scope.row.addressLong" placement="top-start" :open-delay="1000">
                <div class="overHide">{{ scope.row.addressLong }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <copy ref="copyText" :code="4"></copy>
    </div>

    <div class="box">
      <el-card class="box-card">
        <el-button @click="chooseAll">全 选</el-button>
        <el-button @click="chooseUnAll" type="primary">反 选</el-button>
        <el-button @click="chooseCancel" type="primary">取 消</el-button>
        <!-- 
          border 表格
          default-sort 排序
          stripe 隔行斑马线
         -->
        <el-table ref="multipleTable" :data="tableData" border style="width: 100%;margin-top: 10px;"
          :default-sort="{ prop: 'date', order: 'descending' }" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="date" label="日期" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <!-- 
          sortable 需要排序的添加字段
         -->
          <el-table-column prop="age" label="年龄（排序）" align="center" sortable>
          </el-table-column>
          <el-table-column prop="address" label="地址" align="center">
          </el-table-column>
          <el-table-column prop="addressLong" label="地址(超出隐藏)" align="center">
            <template slot-scope="scope">
              <el-tooltip popper-class="tps" :content="scope.row.addressLong" placement="top-start" :open-delay="1000">
                <div class="overHide">{{ scope.row.addressLong }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <copy ref="copyText" :code="5"></copy>
    </div>

    <div class="box">
      <el-card class="box-card">
        <div style="text-align: right;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageFrom.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageFrom.currentPageSize"
            layout="total, sizes, prev, pager, next" :total="total">
          </el-pagination>
        </div>
      </el-card>
      <copy ref="copyText" :code="6"></copy>
    </div>

  </div>
</template>
  
<script>
import { getList } from '@/api/table';
import copy from '../../components/copy.vue'
export default {
  components: { copy },
  data() {
    return {
      code: "",
      //
      tableData: [{
        date: '2016-05-02',
        name: '王小虎25',
        age: '25',
        address: '上海市普陀区金沙江路 1518 弄',
        addressLong: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-02',
        name: '王小虎17',
        age: '17',
        address: '上海市普陀区金沙江路 1518 弄',
        addressLong: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-02',
        name: '王小虎30',
        age: '30',
        address: '上海市普陀区金沙江路 1518 弄',
        addressLong: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-02',
        name: '王小虎30',
        age: '31',
        address: '上海市普陀区金沙江路 1518 弄',
        addressLong: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
      }],
      
      multipleSelection: [],//选中的行

      //分页
      total: 400, //数据数量
      pageFrom: {
        currentPage: 1,  //当前页数
        currentPagesize: 10, //一页多少条
      }
    }
  },
  created() {

  },
  methods: {
    handleClick(val) {
      console.log(val)
    },
    del() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //选择点击
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //全选
    chooseAll() {
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      });
    },
    //反选
    chooseUnAll() {
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    },
    //取消选中
    chooseCancel() {
      this.$refs.multipleTable.clearSelection();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageFrom.currentPagesize = val
      console.log(this.pageFrom)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageFrom.currentPage = val
      console.log(this.pageFrom)
    },
    getList() {
      let data = {
        ...this.search_form,
        currentPage: this.ruleForm.pageNum,
        currentPageSize: this.ruleForm.pageSize,
      }
      getList(data).then(r => {
        if (r.code == 200) {
          this.tableData = r.data.records
          this.count = r.data.total
          // 删除最后一页最后一条数据请求上一页数据
          if ((this.ruleForm.pageNum - 1) * this.ruleForm.pageSize == this.count) {
            this.ruleForm.pageNum = this.ruleForm.pageNum - 1
            this.getList()
          }
        } else {
          Message.error({
            message: r.msg,
          });
        }
      })
    }

  }
}
</script>
  
<style lang="less" scoped>
.search {
  margin: 40px;

  .box {
    position: relative;

    .box-card {
      margin: 0 220px 0 0;
      margin-bottom: 20px;

      .overHide {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
<style>
.tps.el-tooltip__popper {
  max-width: 300px;
  /* background: red; */
}

.tps.el-tooltip__popper.is-dark {
  background: #777;
}

.tps.el-tooltip__popper.is-light {
  background: red;
}
</style>
  